<template>
    <div class="content">
        <div ref="charts" style="width: 1500px; height: 800px"></div>
    </div>
</template>
  
  
<script>
import * as echarts from "echarts";
import zhongguo from "@/utils/city"
// 新增加北京的地图JSON文件
import beijing from "@/utils/beijing.JSON";
export default {
    created() {
        this.$nextTick(() => {
            this.initCharts();
        })
    },
    methods: {
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                // 背景颜色
                backgroundColor: "#404a59",
                // 提示浮窗样式
                tooltip: {
                    show: true,
                    trigger: "item",
                    alwaysShowContent: false,
                    backgroundColor: "#0C121C",
                    borderColor: "rgba(0, 0, 0, 0.16);",
                    hideDelay: 100,
                    triggerOn: "mousemove",
                    enterable: true,
                    textStyle: {
                        color: "#DADADA",
                        fontSize: "12",
                        width: 20,
                        height: 30,
                        overflow: "break",
                    },
                    showDelay: 100
                },
                // 地图配置
                geo: {
                    map: "china",
                    label: {
                        // 通常状态下的样式
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                        // 鼠标放上去的样式
                        emphasis: {
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    // 地图区域的样式设置
                    itemStyle: {
                        normal: {
                            borderColor: "rgba(147, 235, 248, 1)",
                            borderWidth: 1,
                            areaColor: {
                                type: "radial",
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                    },
                                ],
                                globalCoord: false, // 缺省为 false
                            },
                            shadowColor: "rgba(128, 217, 248, 1)",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10,
                        },
                        // 鼠标放上去高亮的样式
                        emphasis: {
                            areaColor: "#389BB7",
                            borderWidth: 0,
                        },
                    },
                },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "pin",
                        legendHoverLink: true,
                        symbolSize: [60, 60],
                        // 这里渲染标志里的内容以及样式
                        label: {
                            show: true,
                            formatter(value) {
                                return value.data.value[2];
                            },
                            color: "#fff",
                        },
                        // 标志的样式
                        itemStyle: {
                            normal: {
                                color: "rgba(255,0,0,.7)",
                                shadowBlur: 2,
                                shadowColor: "D8BC37",
                            },
                        },
                        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
                        // 至于如何展示，完全是靠上面的formatter来自己定义的
                        data: [
                            { name: "朝阳区", value: [116.58, 39.92, 1397] },
                            { name: "顺义区", value: [116.70, 40.13, 477] },
                            { name: "通州区", value: [116.70, 39.91, 477] },
                            { name: "西城区", value: [116.77, 40.04, 345] },
                            { name: "丰台区", value: [116.33, 39.85, 435] },
                            { name: "东城区", value: [116.46, 39.93, 546] },
                            { name: "昌平区", value: [116.29, 40.22, 123] },
                            { name: "大兴区", value: [116.38, 39.72, 34] },
                            { name: "海淀区", value: [116.36, 39.96, 234] },
                            { name: "平谷区", value: [117.16, 40.14, 432] },
                            { name: "石景区", value: [116.46, 39.9, 435] },
                            { name: "门头沟区", value: [116.16, 39.92, 123] },
                            { name: "怀柔区", value: [116.67, 40.3, 654] },
                            { name: "经开区", value: [116.55, 39.77, 432] },
                            { name: "密云区", value: [116.86, 40.38, 345] },
                            { name: "延庆区", value: [115.111, 40.43, 456] },
                            { name: "房山区", value: [116.15, 39.72, 645] },
                        ],
                        showEffectOn: "render",
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "pin",
                        legendHoverLink: true,
                        symbolSize: [60, 60],
                        // 这里渲染标志里的内容以及样式
                        label: {
                            show: true,
                            formatter(value) {
                                return value.data.value[2];
                            },
                            color: "#fff",
                        },
                        // 标志的样式
                        itemStyle: {
                            normal: {
                                color: "rgba(255,0,0,.7)",
                                shadowBlur: 2,
                                shadowColor: "D8BC37",
                            },
                        },
                        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
                        // 至于如何展示，完全是靠上面的formatter来自己定义的
                        data: [
                            { name: "朝阳区", value: [116.54, 39.92, 13097] },
                            { name: "顺义区", value: [116.66, 40.13, 4707] },
                            { name: "通州区", value: [116.66, 39.91, 4077] },
                            { name: "西城区", value: [116.73, 40.04, 3045] },
                            { name: "丰台区", value: [116.29, 39.85, 4035] },
                            { name: "东城区", value: [116.42, 39.93, 5046] },
                            { name: "昌平区", value: [116.23, 40.22, 1023] },
                            { name: "大兴区", value: [116.34, 39.72, 304] },
                            { name: "海淀区", value: [116.3, 39.96, 2304] },
                            { name: "平谷区", value: [117.12, 40.14, 4302] },
                            { name: "石景区", value: [116.4, 39.9, 4305] },
                            { name: "门头沟区", value: [116.1, 39.92, 1023] },
                            { name: "怀柔区", value: [116.63, 40.3, 6504] },
                            { name: "经开区", value: [116.51, 39.77, 4302] },
                            { name: "密云区", value: [116.83, 40.38, 3045] },
                            { name: "延庆区", value: [115.98, 40.43, 4056] },
                            { name: "房山区", value: [116.13, 39.72, 6045] },
                        ],
                        showEffectOn: "render",
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "pin",
                        legendHoverLink: true,
                        symbolSize: [60, 60],
                        // 这里渲染标志里的内容以及样式
                        label: {
                            show: true,
                            formatter(value) {
                                return value.data.value[2];
                            },
                            color: "#fff",
                        },
                        // 标志的样式
                        itemStyle: {
                            normal: {
                                color: "green",
                                shadowBlur: 2,
                                shadowColor: "D8BC37",
                            },
                        },
                        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
                        // 至于如何展示，完全是靠上面的formatter来自己定义的
                        data: [
                            { name: "朝阳区", value: [116.54, 39.92, 13097] },
                            { name: "顺义区", value: [116.66, 40.13, 4707] },
                            { name: "通州区", value: [116.66, 39.91, 4077] },
                            { name: "西城区", value: [116.73, 40.04, 3045] },
                            { name: "丰台区", value: [116.29, 39.85, 4035] },
                            { name: "东城区", value: [116.42, 39.93, 5046] },
                            { name: "昌平区", value: [116.23, 40.22, 1023] },
                            { name: "大兴区", value: [116.34, 39.72, 304] },
                            { name: "海淀区", value: [116.3, 39.96, 2304] },
                            { name: "平谷区", value: [117.12, 40.14, 4302] },
                            { name: "石景区", value: [116.4, 39.9, 4305] },
                            { name: "门头沟区", value: [116.1, 39.92, 1023] },
                            { name: "怀柔区", value: [116.63, 40.3, 6504] },
                            { name: "经开区", value: [116.51, 39.77, 4302] },
                            { name: "密云区", value: [116.83, 40.38, 3045] },
                            { name: "延庆区", value: [115.98, 40.48, 4056] },
                            { name: "房山区", value: [116.13, 39.72, 6045] },
                        ],
                        showEffectOn: "render",
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                ],
                
            };
            // // 注意这里是echarts的实例对象，而不是echarts组件本身。
            charts.on('click', ({ name }) => {
                if (name === "北京市") {
                    // 修改option的配置，可以继续自定义
                    option.geo.zoom = 0.8
                    // 就像上面提到的，这里必须要和注册地图时的名字一致
                    option.geo.map = "beijing"
                    // 注册地图
                    echarts.registerMap("beijing", beijing)
                    // 重新渲染
                    charts.setOption(option, true);

                   
                }
            })

            // 地图注册，第一个参数的名字必须和option.geo.map一致
            echarts.registerMap("china", zhongguo)

            charts.setOption(option);
        },
    },
};
</script>
  
  